<template>
    <!-- 人员管理-考勤中心-人员统计 -->
    <div class="empData">
        <div class="top">
            <div class="search">
                <div class="list">
                    <span>统计日期:</span>
                    <DatePicker
                        :editable="false"
                        :clearable="false"
                        type="daterange"
                        format="yyyy-MM-dd"
                        placeholder="请选择日期"
                        style="width: 300px"
                        v-model="value"
                        @on-change="getTime"></DatePicker>
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-table
                :data="list"
                :height="tableHeight"
                :stripe="true">
                <el-table-column
                    align="center"
                    fixed
                    prop="date"
                    label="日期"></el-table-column>
                <el-table-column
                    align="center"
                    prop="empTotal"
                    label="在职人员"></el-table-column>
                <el-table-column
                    align="center"
                    prop="managerNum"
                    label="管理人员"></el-table-column>
                <el-table-column
                    align="center"
                    prop="workerNum"
                    label="劳务人员"></el-table-column>
                <el-table-column
                    align="center"
                    prop="planAttendNum"
                    label="计划出勤人数"></el-table-column>
                <el-table-column
                    align="center"
                    prop="attendNum"
                    label="实际出勤人数"></el-table-column>
                <el-table-column
                    align="center"
                    label="出勤率">
                    <template slot-scope="scope">{{ scope.row.rate }}%</template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    v-if="btnList.includes('emp/data/edit')">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="edit(scope.$index, scope.row)"
                            >编辑</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div
                class="clearfix"
                 >
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        show-sizer
                        @on-change="pageChange"
                        @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>

        <Modal
            v-model="editModel"
            title="编辑"
            width="350"
            :mask-closable="false">
            <div class="model_box">
                <div class="item">
                    <span>在职人员：</span>
                    <span>{{ empTotal }}</span>
                </div>
                <div class="item">
                    <span><i>*</i>计划出勤人数：</span>
                    <el-input
                        type="number"
                        min="1"
                        placeholder="请输入内容"
                        v-model="planAttendNum"></el-input>
                </div>
                <div class="item">
                    <span>实际出勤人数：</span>
                    <span>{{ attendNum }}</span>
                </div>
                <div class="item">
                    <span>出勤率：</span>
                    <span>{{ rate }}%</span>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel"
                    type="info"
                    size="mini"
                    >取消</el-button
                >
                <el-button
                    @click="editSure"
                    type="primary"
                    size="mini"
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>
    </div>
</template>

<script>
import { getdataList, setdataplan } from "@/api/emp.js"
import { initYMD } from "@/sever/utils"
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now()
                },
            },
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            list: [],
            value: [new Date(new Date().getTime() - 2505600000), new Date()],
            deptId: "",
            tableHeight: window.innerHeight - 345,
            editModel: false,
            planAttendNum: "", //计划出勤人数
            attendNum: "", //实际出勤人数
            empTotal: "", //在职人数
            rate: "", //出勤率
            date: "",
            btnList: [],
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId
                this.current = 1
                this.pageNum = 1
                this.workTypeId = ""
                this.value = [new Date(new Date().getTime() - 2505600000), new Date()]
                this.getlist()
            }
        },
    },
    methods: {
        cancel() {
            this.editModel = false
        },
        getlist() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.deptId,
                startDate: initYMD(this.value[0]),
                endDate: initYMD(this.value[1]),
            }
            getdataList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list
                        this.totalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        edit(index, row) {
            this.editModel = true
            this.empTotal = row.empTotal
            this.planAttendNum = row.planAttendNum
            this.attendNum = row.attendNum
            this.rate = row.rate
            this.date = row.date
        },
        editSure() {
            if (this.planAttendNum == "") {
                this.$message({
                    type: "success",
                    message: "计划出勤人数是必填项喔!",
                })
                return
            }
            let params = {
                deptId: this.deptId,
                date: this.date,
                planAttendNum: this.planAttendNum,
            }
            setdataplan(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: "操作成功!",
                        })
                        this.editModel = false
                        this.getlist()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getTime(value) {
            this.pageNum = 1
            this.current = 1
            this.value = value
            this.getlist()
        },
        pageChange(index) {
            this.pageNum = index
            this.getlist()
        },
        pageSizeChange(index) {
            this.pageSize = index
            this.getlist()
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId
        this.btnList = JSON.parse(localStorage.getItem("arr"))
        this.getlist()
    },
}
</script>
<style lang="less" scoped>
// @import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";
/deep/ .el-input {
    width: 25%;
}
.model_box {
    .item {
        span:first-child {
            width: auto !important;
        }
    }
}
.empData {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            width: auto;
            margin-left: 20px;
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
        .down {
            width: auto;
            margin-right: 20px;
        }
    }
    .bottom {
        width: 100%;
        padding: 20px;
        margin-top: 10px;
        box-sizing: border-box;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
        .down {
            width: 98%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .msg {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 24px;
                p {
                    margin-right: 10px;
                    font-size: 16px;
                    color: #000;
                    &:nth-child(2) {
                        color: red;
                    }
                }
            }
        }
        .updateCorp {
            cursor: pointer;
            margin-left: 5px;
            padding: 2px 4px;
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            color: #ffffff;
            border-radius: 3px;
            background-color: var(--themeColor);
        }
    }
}
</style>
